<template>
  <div class="login-box">
    <a-card style="width: 400px">
      <h2>千锋</h2>
      <a-tabs :centered="true" v-model:activeKey="formState.role">
        <a-tab-pane key="inspec" tab="监督检查管理系统"></a-tab-pane>
        <a-tab-pane key="familyPartyRecord" tab="农村家宴管理系统"></a-tab-pane>
      </a-tabs>
      <a-form :model="formState" @finish="login">
        <a-form-item label="用户名" name="username" :rules="[
          {
            // 是否必传
            required: true,
            // 校验报错的提示
            message: '请输入用户名'
          }
        ]">
          <a-input v-model:value="formState.username" />
        </a-form-item>
        <a-form-item label="密码" name="password" :rules="[
          {
            // 是否必传
            required: true,
            // 校验报错的提示
            message: '请输入密码'
          }
        ]">
          <a-input-password v-model:value="formState.password" />
        </a-form-item>
        <a-form-item>
          <a-button type="primary" html-type="submit">登录</a-button>
        </a-form-item>
      </a-form>
    </a-card>
  </div>
</template>

<script setup>
import API from './../api'
import { useRouter } from 'vue-router'
import { ref, onMounted } from 'vue';
import { addRoute, removeRoute } from './../layout/layout.util'
import useUserStore from '../store/user';

const router = useRouter()

const userStore = useUserStore()

onMounted(() => {
  /**
   * 要先清空子路由
   * 在清空缓存
   * 
   * 清空子路由依赖缓存中的roles
   */
  removeRoute(router, userStore.roles)

  localStorage.clear()
})



const formState = ref({
  role: 'inspec'
})

/**
 * 登录
 */
const login = async () => {
  // 校验账号密码

  // 获取账号密码

  // 确定当前登录的角色

  // 调用登录接口
  const data = await API.login(formState.value)

  // 保存token，放到axios请求前拦截，所有的请求都需要添加token

  // 把token 存到localstorage里

  localStorage.setItem('token', data.token)

  // 根据后端返回的角色完成相关权限操作

  // 拿到当前用户角色

  // 调用用户信息接口
  const userInfo = await API.getUserInfo()

  // 根据用户角色显示不同的菜单


  // 把用户角色存到localstorage里，在需要的地方使用
  // localStorage.setItem('roles', JSON.stringify(userInfo.roles))

  // 存到pinia里
  userStore.roles = userInfo.roles

  // 根据角色动态添加路由
  addRoute(router, userInfo.roles)

  // 跳转到layout里对应的页面
  router.push(userInfo.roles.includes('/inspec') ? `/storeManage/company` : '/storeManage/culturalAuditorium')
}

</script>

<style scoped lang="scss">
.login-box {
  width: 100%;
  height: 100vh;
  background: #2f3447;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
</style>